<template>
	<div id="footer_nav">
		<div v-for="(nav,i) in navs" class="nav" @click=clickNav(nav)>
			<img :src="activeNav == i?nav.icon_active:nav.icon">
			<p :class="{colored: activeNav == i}">{{nav.name}}</p>
			<div class="red-point" v-if="i==2" v-show="cartNum">
				{{cartNum}}
			</div>
		</div>
	</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import home from '@/assets/img/home/home.png'
import home_active from '@/assets/img/home/home_active.png'
import category from '@/assets/img/home/category.png'
import category_active from '@/assets/img/home/category_active.png'
import cart from '@/assets/img/home/cart.png'
import cart_active from '@/assets/img/home/cart_active.png'
import user from '@/assets/img/home/user.png'
import user_active from '@/assets/img/home/user_active.png'
export default{
	name:'FooterNav',
	data(){
		return{
			navs:[{
				name:'首页',
				icon:home,
				icon_active:home_active,
				path:'/'
			},{
				name:'分类',
				icon:category,
				icon_active:category_active,
				path:'/category'
			},{
				name:'购物车',
				icon:cart,
				icon_active:cart_active,
				path:'/cart'
			},{
				name:'个人',
				icon:user,
				icon_active:user_active,
				path:'/usercenter'
			}],
			activeNav: 0,
		}
	},
	computed:{
		...mapGetters({
			cartNum: 'cart/cartNum'
		}),
	},
	created(){
		this.setActiveNav()
		this.getCartNum()
	},
	methods:{
		clickNav(nav){
			this.$router.push(nav.path)
		},
		setActiveNav(){
			switch(this.$route.name){
				case 'homepage':
					this.activeNav = 0
					break
				case 'category':
					this.activeNav = 1
					break
				case 'cart':
					this.activeNav = 2
					break
				case 'usercenter':
					this.activeNav = 3
					break
			}
		},
		getCartNum(){
			this.$store.dispatch('cart/getCartNum')
		}
	},
	watch:{
		$route(){
			this.setActiveNav()
		}
	}
}
</script>
<style lang='less' scoped>
#footer_nav{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1.33rem;
	background: #fbfbfb;
	padding-top: .2rem;
	z-index: 5;
	.nav{
		float: left;
		width: 25%;
		text-align: center;
		color: #858585;
		font-size: .32rem;
		position: relative;
		img{
			height: 0.6rem;
			margin-bottom: -.1rem;
		}
	}
}
.red-point{
	right: .85rem;
	top: 0rem;
}
</style>